<template>
    <div class="hello">
        <div class="el-card box-card is-always-shadow cc_cursor">
            <div class="el-card__header cc_cursor">
                <div class="clearfix cc_cursor">
                    <span>抽奖信息</span>
                    <button type="button" class="el-button el-button--text"
                            style="float: right; padding: 3px 0px; margin-left: 10px" @click="$router.push('/')">
                        <span>返回</span>
                    </button>
                    <button type="button" class="el-button el-button--text" style="float: right; padding: 3px 0px;"
                            @click="refresh">
                        <span>刷新</span>
                    </button>
                </div>
            </div>
            <div class="el-card__body cc_cursor">
                <div class="text item">
                    <p>
                        当前积分: {{integral}}
                        <button type="button" class="el-button el-button--text" style="float: right;"
                                @click="exchange">
                            <span>兑换</span>
                        </button>
                    </p>
                    <p class="tip">每次抽奖增加1积分</p>
                </div>
                <div class="text item cc_cursor">
                    <p>幸运值: （ {{luckNum}} / 100 ）</p>
                    <p class="tip">幸运值越高中奖几率越大</p>
                </div>
                <div class="text item">
                    <p>已中奖品：</p>
                    <p class="tip list" v-for="(item, index) in result" :key="index">
                        {{index + 1}}. {{item.name}}
                    </p>
                </div>
            </div>
        </div>
        <transition name="el-message-fade">
            <div class="el-message" :class="'el-message--' + messageType" v-if="isShowMessage">
                <i :class="`el-message__icon el-icon-${ messageType }`"></i>
                <p class="el-message__content">{{ messageText }}</p>
            </div>
        </transition>
    </div>
</template>

<script src="./about.js" />

<style lang="less">
    p {
        margin: 0;
        padding: 0;
    }

    .tip {
        font-size: 18px;
        color: #999;

        &.list {
            margin: 10px 0;
        }
    }

    .el-message {
        font-size: 0.2rem;
        min-width: 88vw;
    }
</style>
